<template>
	<tm-fullView>
		<tm-menubars title="个人资料" iconColor="white" :showback="true" />
		<view v-if="user.userId">
			<view class="user" :class="{'back-bg':isBlack}">
				<view class="avatar">
					<tm-avatar :src="user.avatar||appConfig.avatar" :size="140" ></tm-avatar>
				</view>
				<view class="right">
					<view>
						<view class="nickname">{{user.nickname||''}}</view>
						<view class="chat-no">{{$t('通讯号')}}:{{user.chatNo?user.chatNo:''}}</view>
						<view class="chat-no">{{$t('签名')}}:{{user.sign?user.sign:''}}</view>
					</view>
					<tm-button @click="navto('/friend/apply?userId='+userId)" v-if="!isfriend" theme="pink" size="m">{{$t('加我好友')}}</tm-button>
					<tm-button v-else theme="red" size="m">{{$t('删除好友')}}</tm-button>
				</view>
				
			</view>
			<view class="info" :class="{'back-bg':isBlack}">
				<view class="gender">
					<tm-icons size="30" name="myicon-nv"></tm-icons>
					<text class="gender-text">女</text>
				</view>
				<text class="driver">|</text>
				<text class="item-text">29岁</text>
				<text class="driver">|</text>
				<text class="item-text">6月30日</text>
			</view>
			<tm-gap></tm-gap>
			<tm-grouplist title="" title-theme="blue text" :margin="[0,0]" :round="0">
				<tm-listitem  :title="$t('设置备注')" left-icon="myicon-user-edit" show-left-icon left-icon-color="#666666" @click="navigateTo('/pages/user/info')"></tm-listitem>
				<tm-listitem  :title="$t('发送消息')" left-icon="myicon-xiaoxi5" show-left-icon left-icon-color="#666666"></tm-listitem>
				<tm-listitem  :title="$t('音视频通话')" left-icon="myicon-yinshipinhuiyi" show-left-icon left-icon-color="#666666"></tm-listitem>
			</tm-grouplist>
			<!-- <view class="posts">
				<tm-album :max="6" :gutter="10" :round="0" :grid="3" :list="list2">
					<template #actions="{item}" >
						<view class=" d-inline-block" @click.stop.prevent="$tm.toast('收藏成功')">
							<tm-button theme='white' :icon-size="42" size="s" fab titl icon="icon-collection"></tm-button>
						</view>
					</template>
				</tm-album>
			</view> -->
		</view>
		<view class="empty-loading" v-else>
			<tm-loadding :load="true"></tm-loadding>
		</view>
	</tm-fullView>
</template>

<script>
	import UserApi from '@/api/user.js'
	import FriendApi from '@/api/friend.js'
	export default {
		data() {
			return {
				showRightSearch: false,
				userId: 0,
				user: {},
				isfriend:true,
				list2:[],
			}
		},
		onLoad(options) {
			this.userId = options.userId
			this.getData()
			this.isFriend()
			let p = [];
					

					for (var i = 0; i < 6; i++) {
						p.push({
							src:`https://picsum.photos/300?k=${i}`,
							text:`标题${i}`
						})
					}
					this.list2 = p;
		},
		methods: {
			getData() {
				let self = this
				uni.showLoading({
					title: '加载中...'
				})
				UserApi.detail({
					userId: self.userId
				}).then(res => {
					uni.hideLoading()
					self.user = res.data
				})
			},
			isFriend(){
				FriendApi.isFriend({toId:this.userId}).then(res=>{
					this.isfriend=res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.user{
	padding: 30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #fff;
	.right{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-left: 20rpx;
		.nickname{
			font-weight: bold;
			font-size: 32rpx;
		}
		.chat-no{
			margin-top: 10rpx;
		}
	}
	
}
.info{
	padding: 10rpx 30rpx;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	.gender{
		.gender-text{
			margin-left: 10rpx;
			font-size: 28rpx;
		}
	}
	.driver{
		padding: 0 20rpx;
	}
	.item-text{
		font-size: 28rpx;
	}
}
.posts{
	padding: 20rpx;
}
</style>